<template>
  <j-modal
    switchFullscreen
    :title='title'
    :width='500'
    :visible='visible'
    :maskClosable='false'
    :confirmLoading='confirmLoading'
    :okButtonProps='{ props: {disabled: disableSubmit} }'
    @ok='handleOk'
    @cancel='handleCancel'
    cancelText='关闭'>
    <template slot='footer'>
      <a-button @click='handleCancel'>取消</a-button>
      <a-button type='primary' @click='handleOk' v-if='!disableSubmit'>确认</a-button>
    </template>
    <!--    <div class='info-line'>基础设置</div>-->
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-row :gutter='24'>
          <!--          所属区域-->
          <a-col :md='24' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='客户编号'
            >
              <a-input-search v-decorator="['custCode',validatorRules.custCode]"
                              readOnly enter-button @search="custSearch('superiorUser')" :disabled='disableSubmit' />
            </a-form-item>
          </a-col>
          <a-col :md='24' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='客户名称'
              >
              <a-input disabled='true' v-decorator="['custName']" />
            </a-form-item>
          </a-col>
          <a-col :md='24' :sm='24'>
            <a-form-item label='用户编号' :labelCol='labelCol' :wrapperCol='wrapperCol'>
              <a-input-search v-decorator="['userCode', validatorRules.userCode]"
                              readOnly enter-button @search="productSearch('superiorUser')" :disabled='disableSubmit' />
              <a-input type='hidden' v-decorator="['userCode', validatorRules.userCode]" />
            </a-form-item>
          </a-col>

          <a-col :md='24' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='用户名称'
              >
              <a-input disabled='true' v-decorator="[ 'userName']" />
            </a-form-item>
          </a-col>

            <a-col :md="24" :sm="24">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="是否授权"
              >
                <cn-dict-select-tag
                  v-decorator="['isAuth']"
                  :disabled="disableSubmit"
                  :options="{value:'dictDataCode',label:'dictDataDesc'}"
                  dict-code="authori_zation"
                  placeholder="请选择"
                  triggerChange/>
              </a-form-item>
            </a-col>
          <a-col :md='24' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='备注'
              >
              <a-textarea :disabled='disableSubmit' v-decorator="['remarks', ]" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <proChose :name='modelname' ref='prochoose' v-bind='modalProps' @okbro='okbropro'></proChose>
  </j-modal>
</template>

<script>
import proChose from '@comp/cn-components/ProChose'
import { getAction, httpAction, postAction } from '@/api/manage'
import { pick } from 'lodash'
import moment from 'moment'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import JAreaLinkage from '@comp/cn-form/CnAreaLinkage'
import { isMobile, isPermit } from '@/utils/validate'
import UploadImage from '@/components/upload-image/UploadImage'
import JImageUpload from '@/components/cn-form/JImageUpload'
import Area from '@/components/utils/Area'

export default {
  name: 'relationModel',
  data() {
    return {
      sendPro: false,
      remarks: '',
      dataSurces: [],
      disableSubmit: false,
      // dataSurces3: [],
      manobjList: [0],
      areaData: '',
      modelname: '关联',
      areaLinkage: '',
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        customerCode: {
          rules: [
            { required: true, message: '' }
          ]
        },
        userCode: {
          rules: [
            { required: true, message: '' }
          ]
        },
        businessType: {
          rules: [
            { required: true, message: '' }
          ]
        }
      },
      addOrUpdateUrl: window._CONFIG['domianURL'] + '/cnTerminalController/saveOrUpdateTerminal'
    }
  },
  components: { JTreeSelect, JAreaLinkage, UploadImage, JImageUpload, proChose },
  created() {
    // console.log(this.areaData);
  },
  computed: {
    modalProps() {
      return {
        name: this.name
      }
    }
  },
  methods: {
    okbropro(val, status, status2) {
      // console.log('数据',val)
      let objs = JSON.parse(JSON.stringify(val[0]))
      console.log('弹出框数据', objs)
      if (this.modelname == '客户') {
        this.form.setFieldsValue({
          custCode: objs.custCode,
          custName: objs.custName
        })
      } else if (this.modelname == '用户') {
        this.form.setFieldsValue({
          userCode: objs.userName,
          userName: objs.realName
        })
      }

    },
    add() {
      this.edit()
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      if(this.model.isAuth == null){
        this.model.isAuth = 0
      }
      console.log(this.model.isAuth)
      let fieldsVal = pick(this.model, 'custCode','custName','customerCode','isAuth','customerName', 'userCode', 'userName', 'businessType', 'remarks')
      this.$nextTick(() => {
        this.form.setFieldsValue(fieldsVal)
      })
    },
    handleCancel() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      let that = this
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let formData = Object.assign(that.model, values)
          formData.ywlx = '企业订单'
          console.log('数据', formData)
          postAction('/customer/cnCustomerRelation/saveOrUpdate', formData).then((res) => {
            if (res.success) {
              that.$message.success(res.message, 2)
              that.$emit('ok')
              that.handleCancel()
            } else {
              that.$message.error(res.message, 2)
            }
          }).finally(() => {
            that.confirmLoading = false
          })

        }
      })
    },
    custSearch(status) {
      this.modelname = '客户'
      // console.log('数据',status)
      this.$refs.prochoose.rowKey = 'id'
      let formconfig = [
        {
          key: 'custCode',
          label: '客户编号'
        },
        {
          key: 'custName',
          label: '客户名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '客户编号',
            align: 'center',
            dataIndex: 'custCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '客户名称',
            align: 'center',
            dataIndex: 'custName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/customerController/findPageList',
        multiple: false,
        columW: 8
      }
      let dataSource = []
      if (this.form.getFieldValue('superiorUser')) {
        dataSource = [{
          userName: this.form.getFieldValue('superiorUser'),
          realName: this.form.getFieldValue('realName')
        }]
      }
      this.name = '客户'
      this.$refs.prochoose.isorter = { permflag: 'purchase_customer_page_impl_add_cust' }
      this.$refs.prochoose.edit(formconfig, tableconfig, 'superiorUser', 'realsname', dataSource)
    },
    businessxz(value, code, option) {
      console.log('数据', code.dictDataDesc)
    },
    productSearch(status) {
      this.modelname = '用户'
      this.$refs.prochoose.rowKey = 'id'
      let formconfig = [
        {
          key: 'userName',
          label: '用户编号'
        },
        {
          key: 'realName',
          label: '用户名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '用户编号',
            align: 'left',
            dataIndex: 'userName',
            width: 120,
            ellipsis: true
          },
          {
            title: '用户名称',
            align: 'left',
            dataIndex: 'realName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/cnUserController/getPageList',
        multiple: false,
        columW: 10
      }
      this.name = '用户'
      let dataSource = []
      if (this.form.getFieldValue('superiorUser')) {
        dataSource = [{
          userName: this.form.getFieldValue('superiorUser'),
          realName: this.form.getFieldValue('realsname')
        }]
      }
      this.$refs.prochoose.isorter = { permflag: 'customer_relation_page_impl_add_user' }
      this.$refs.prochoose.edit(formconfig, tableconfig, 'superiorUser', 'realsname', dataSource)
    }
  }
}
</script>

<style lang='less' scoped>
.info-line {
  display: flex;
  flex-direction: row;
}

.info-line:before {
  content: "";
  flex: 0.1;
  border-bottom: 1px solid #ebedee;
  margin: auto 4px;
}

.info-line:after {
  content: "";
  flex: 0.9;
  border-bottom: 2px solid #ebedee;
  margin: auto 4px;
}
</style>
